<template>
	<view class="home">
		<up-navbar title="忘记密码" autoBack> </up-navbar>
		<view class="u-flex u-flex-y-center login-input u-m-b-48 u-p-l-20 u-p-r-20">
			<u-image :fade="false" src="/static/images/icon_phone.png" width="40rpx" height="40rpx"></u-image>
			<u-input class="u-m-l-20 u-m-r-20" v-model="data.mobile" placeholder="输入手机号" border="none"></u-input>
		</view>
		<view class="u-flex u-flex-y-center login-input u-m-b-48 u-p-l-20 u-p-r-20">
			<u-image :fade="false" src="/static/images/icon_password.png" width="40rpx" height="40rpx"></u-image>
			<u-input class="u-m-l-20 u-m-r-20" v-model="data.captcha" placeholder="输入验证码" border="none"></u-input>
			<u-text text="获取验证码" color="#0C9BF4" size="28rpx" v-if="!data.code" @click="handleStart" align="right"></u-text>
			<u-text :text="data.code" color="#0C9BF4" size="28rpx" v-else align="right"></u-text>
		</view>
		<view class="u-flex u-flex-y-center login-input u-m-b-48 u-p-l-20 u-p-r-20">
			<u-image :fade="false" src="/static/images/icon_password.png" width="40rpx" height="40rpx"></u-image>
			<u-input class="u-m-l-20 u-m-r-20" :type="data.show?'text':'password'" v-model="data.newpassword" placeholder="输入新密码" border="none"></u-input>
			<u-image :fade="false" src="/static/images/icon_eye.png" @click="handleStatus('show')" v-if="data.show"
				width="40rpx" height="40rpx"></u-image>
			<u-image :fade="false" src="/static/images/icon_eye_n.png" @click="handleStatus('show')" v-else width="40rpx"
				height="40rpx"></u-image>
		</view>
		<view class="u-flex u-flex-y-center login-input u-m-b-48 u-p-l-20 u-p-r-20">
			<u-image :fade="false" src="/static/images/icon_password.png" width="40rpx" height="40rpx"></u-image>
			<u-input class="u-m-l-20 u-m-r-20" v-model="data.newpassword" :type="data.newShow?'text':'password'" placeholder="确认新密码" border="none"></u-input>
			<u-image :fade="false" src="/static/images/icon_eye.png" @click="handleStatus('newShow')" v-if="data.newShow"
				width="40rpx" height="40rpx"></u-image>
			<u-image :fade="false" src="/static/images/icon_eye_n.png" @click="handleStatus('newShow')" v-else width="40rpx"
				height="40rpx"></u-image>
		</view>
		<u-button customStyle="margin:130rpx auto 20rpx;height:100rpx;fontSize:36rpx;borderRadius:12rpx" type="primary"
			@click="_resetpwd">确认</u-button>
		<up-code :seconds="30" @end="codeEnd" startText="" ref="codeRef" @change="codeChange"></up-code>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { resetpwd } from '../../config/api';
	interface TypeData {
		[prop : string] : string | number | Function | Boolean;
	}
	const codeRef = ref(null)
	const data = ref<TypeData>({
		mobile: '',
		captcha: '',
		newpassword: '',
		code: '',
		show: false,
		newShow: false
	})
	// 
	const handleStatus = (key : string) => {
		data.value[key] = !data.value[key]
	}
	// 倒计时修改
	const codeChange = (text : string) => {
		data.value.code = text
	}
	// 倒计时结束
	const codeEnd = () => {
		data.value.code = ''
	}
	// 开始倒计时
	const handleStart = () => {
		codeRef.value.start()
	}
	// 忘记密码
	const _resetpwd = () => {
		resetpwd({ mobile: data.value.mobile, captcha: data.value.captcha, newpassword: data.value.newpassword }).then(res => {
			console.log(res)
		})
	}
</script>

<style lang="scss" scoped>
	.home {
		padding: 240rpx 60rpx;
	}

	.login-input {
		height: 100rpx;
		background: #F5F5F5;
		border-radius: 12px;
	}
</style>